<script>
import { ref } from "vue";
import { http } from "../../api/fetch";
export default {
  setup() {
    let apps = ref([]);
    let columns = ref([
      {
        prop: "index",
        title: "序号",
      },
      {
        prop: "name",
        title: "应用名称",
      },
      {
        prop: "hasImp",
        title: "是否实现",
      },
    ]);
    return {
      columns,
      apps,
    };
  },
  async mounted() {
    await this.getApps();
  },
  methods: {
    async getApps() {
      try {
        const res = await http.get("/api/app/get");
        this.apps = res.data || [];
      } catch (e) {
        console.log(e);
      }
    },
    async updateImp(app) {
      try {
        const res = await http.post("/api/app/hasImp", {
          name: app.name,
          hasImp: !app.hasImp,
        });
        console.log(res);
        if (res.code == 0) {
          await this.getApps();
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<template>
  <div class="sw_app_container">
    <table>
      <tr>
        <td v-for="(column, index) in columns" :key="index">
          {{ column.title }}
        </td>
      </tr>
      <tr v-for="(app, appIndex) in apps" :key="appIndex">
        <td v-for="(column, index) in columns" :key="index">
          <div v-if="column.prop == 'hasImp'">
            <input
              type="checkbox"
              v-model="app[column.prop]"
              @input="updateImp(app)"
            />
          </div>
          <div v-else-if="column.prop == 'index'">
            <span>{{ apps.length - appIndex }}</span>
          </div>
          <div v-else>
            <span>
              {{ app[column.prop] }}
            </span>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<style lang="less">
.sw_app_container {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin-bottom: 20px;
  .sw_app {
    font-size: 16px;
    margin: 10px;
    padding: 15px 50px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>
